<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竖状文件夹</title>
    <style>

        .folder-structure {
            margin: 50px;
            --padding-left: 30px;
            --padding-top: 15px;
            --line-height: 20px;
        }
        ul {
            list-style: none; /* 去掉默认的列表样式 */
            margin: 0;
            padding: 0;
        }
        ul {
            padding-left: var(--padding-left);
            
        }
        ul li {
            padding-top: var(--padding-top);
            line-height: var(--line-height);
            position: relative;
        }
        /* 绘制竖线 */
        ul li::before {
            content: '';
            display: block;
            width: 1px;
            height: 100%;
            background-color: black;
            position: absolute;
            top: 0;
            left: calc(var(--padding-left) * -1);
        }
        /* 绘制横线 */
        ul li::after {
            content: '';
            display: block;
            width: var(--padding-left);
            height: 1px;
            background-color: black;
            position: absolute;
            left: calc(var(--padding-left) * -1) ;/* 文字高度的一半 */
            top:  calc(var(--padding-top) + var(--line-height) / 2  );
        }
        /* 去掉每一个ul中最后一个Li多出来的左边线 */
        ul li:last-child::before {
            height: calc(var(--padding-top) + var(--line-height) / 2 );
        }
    </style>
</head>
<body>
    <div class="folder-structure">
        <!-- 一级目录 -->
        <ul>
            <li>前端
            <!-- 二级目录 -->
             <ul>
                <li>HTML</li>
                <li>CSS
                <!-- 三级目录 -->
                 <ul>
                    <li>文本样式</li>
                    <li>盒子模型</li>
                    <li>Position定位</li>
                    <li>背景样式</li>
                 </ul>
                 </li>
                <li>JavaScript</li>
                <li>Vue</li>
                <li>React</li>
             </ul>
             </li>
            <li>Java</li>
            <li>Python</li>
        </ul>
    </div>
</body>
</html>
